import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import { Steps } from 'antd-mobile'
import { getRoad } from './api'
import { LeftOutline, RightOutline } from 'antd-mobile-icons'
import './css.less'
export default function

    () {
    type ParamsType = {
        id: string;
    }
    const { Step } = Steps
    const { id } = useParams<ParamsType>()
    const [list, setList] = useState([])
    const [obj, setObj] = useState<any>({})
    const getMRoad = async () => {
        const data = await getRoad(id)
        console.log(data.data.data);
        setList(data.data.data.metroStepList)
        setObj({ 'first': data.data.data.first, 'end': data.data.data.end, 'name': data.data.data.name })
    }
    useEffect(() => {
        getMRoad()


    }, [])

    return (
        <div>
            <div style={{ 'margin': 'auto', 'fontSize': '24px', 'textAlign': 'center', 'color': 'red', 'marginBottom': '10px' }}><strong>{obj.name}</strong></div>
            <div className='header-z'>
                <div className='left-z'>{obj.first}</div><div className='arrow-z'><LeftOutline /><RightOutline /></div><div className='right-z'>{obj.end}</div>
            </div>
            <Steps current={list.length} direction='vertical'>

                {list.map((item: any) => {
                    return <Step title={item.name} />
                })}
            </Steps>
        </div>
    )
}
